<template>
  <main-layout title="夕雨智能采购系统">
    <!-- 图表部分 -->

    <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
      <van-swipe-item>
        <div class="chart-list">
          <div ref="lineChartNode" class="chart-box"></div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="chart-list">
          <div ref="pieChartNode" class="chart-box"></div>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <div class="func-box" v-for="item in funcList" :key="item.name">
      <!-- 各个分类标题 -->
      <div class="title">{{ item.name }}</div>
      <!-- 分类下的子分类 -->
      <div class="box">
        <div class="item" v-for="it in item.children" :key="it.name">
          <i :class="['icon', it.icon]" @click="toPage(it)"></i>
          <span>{{ it.name }}</span>
        </div>
      </div>
    </div>
  </main-layout>
</template>
<script>
import echarts from "echarts";
import lineChart from "./lineChart";
import pieChart from "./pieChart";
import { collectionApi, paymentApi } from "../../apis/HomeApi";
export default {
  mixins: [lineChart, pieChart],
  data() {
    return {
      funcList: [
        {
          name: "基础数据",
          children: [
            {
              id: "SYSTEM-01-01",
              icon: "product-list",
              name: "材料管理",
              right: "R",
              path: "/product/list",
            },
            {
              id: "SYSTEM-01-04",
              icon: "product-new",
              name: "新建材料",
              right: "C",
              path: "/product/edit",
            },
            {
              id: "SYSTEM-01-05",
              icon: "supplier-list",
              name: "供应商管理",
              right: "R",
              path: "/supplier/list",
            },
            {
              id: "SYSTEM-01-06",
              icon: "supplier-new",
              name: "新建供应商",
              right: "C",
              path: "/supplier/edit",
            },
          ],
        },
        {
          name: "项目管理",
          children: [
            {
              id: "PROJECT-01-01",
              icon: "project-list",
              name: "项目管理",
              right: "R",
              path: "/project/list",
            },
            {
              id: "PROJECT-01-02",
              icon: "project-new",
              name: "新建项目",
              right: "C",
              path: "/project/edit",
            },
          ],
        },
        {
          name: "采购管理",
          children: [
            {
              id: "PURCHASE-01-01",
              icon: "purchase-list",
              name: "采购管理",
              right: "R",
              path: "/purchase/list",
            },
            {
              id: "PURCHASE-01-02",
              icon: "purchase-new",
              name: "新建采购",
              right: "C",
              path: "/purchase/edit",
            },
          ],
        },
        {
          name: "收货管理",
          children: [
            {
              id: "RECEIVING-01-01",
              icon: "receive-list",
              name: "收货管理",
              right: "R",
              path: "/receiving/list",
            },
            {
              id: "RECEIVING-01-02",
              icon: "receive-new",
              name: "新建收货",
              right: "C",
              path: "/receiving/edit",
            },
          ],
        },
        {
          id: "",
          name: "系统管理",
          children: [{ icon: "setting", name: "设置", path: "/setting" }],
        },
      ],
    };
  },
  computed: {
    myRights() {
      return this.$store.getters["common/userRights"];
    },
  },
  methods: {
    toPage(route) {
      // 当没有路由时显示尚在完善中提示
      if (!route.path) {
        this.$toast.fail("功能尚在完善中敬请期待!");
        return;
      }
      // 设置界面不要权限，可直接跳转
      if (!route.right) {
        this.$router.push(route.path);
        return;
      }
      // 通过当前菜单的编码找到对应的权限，在判断权限是否具备，如果不具备，则提示用户
      let userRights = this.myRights.find((it) => it.id === route.id);
      if (!!userRights && userRights.role.includes(route.right)) {
        this.$router.push(route.path);
      } else {
        this.$toast.fail("您不具备访问该功能权限请联系管理员!");
      }
    },
    async getLineData() {
      let result = await collectionApi();
      if (result.code === 200) this.renderLineChart(result.data);
    },
    async getPieData() {
      let result = await paymentApi();
      if (result.code === 200) this.renderPieChart(result.data);
    },
  },
  mounted() {
    this.lineChart = echarts.init(this.$refs.lineChartNode);
    // 获取数据，然后再数据获取成功以后，再执行数据可视化渲染
    this.getLineData();
    this.pieChart = echarts.init(this.$refs.pieChartNode);
    this.getPieData();
  },
  beforeDestroy() {
    if (this.timer) clearTimeout(this.timer);
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>